<template>
  <div class="Vip">
    <!-- 操作区 -->
    <div class="operation">
      <el-input
        placeholder="搜索用户"
        v-model="keyword"
        class="handle-input"
        size="small"
        :disabled="true"
      >
        <template #prefix>
          <i class="el-input__icon el-icon-search"></i>
        </template>
      </el-input>
    </div>
    <el-table
      :data="
        vipList.list.filter(
          data =>
            !keyword || data.name.toLowerCase().includes(keyword.toLowerCase())
        )
      "
      :border="true"
      :row-key="row => row.uid"
      @selection-change="handleSelectionChange"
      empty-text="暂无数据"
      height="calc(100vh - 170px)"
    >
      <el-table-column type="expand" label="详情" width="50">
        <template #default="scope">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="UID">
              <span>{{ scope.row.uid }}</span>
            </el-form-item>
            <el-form-item label="微信昵称">
              <span>{{ scope.row._wx }}</span>
            </el-form-item>
            <el-form-item label="所在地">
              <span>{{ scope.row.province }} - {{ scope.row.city }}</span>
            </el-form-item>
            <el-form-item label="用户来源">
              <el-tag :type="vip_from__[scope.row.from].show" size="small">{{
                vip_from__[scope.row.from].text
              }}</el-tag>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ timeFormat(scope.row.create) }}</span>
            </el-form-item>
            <el-form-item label="最近购买">
              <span>{{ timeFormat(scope.row.latest_deal) }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.img[0]"
            :fit="'fit'"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="用户"
        align="center"
        :filters="
          vip__.map((_r, _i, _s) => ({
            text: _s[_i].text,
            value: _i,
          }))
        "
        :filter-method="(value, row) => row.role === value"
      >
        <template #default="scope">
          <div style="margin-bottom: 5px">{{ scope.row.name }}</div>
          <el-tag :type="vip__[scope.row.role].show" size="small">{{
            vip__[scope.row.role].text
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="wallet.change"
        label="零钱"
        align="center"
        sortable
      />
      <el-table-column
        prop="wallet.points"
        label="积分"
        align="center"
        sortable
      />
      <el-table-column
        prop="success_amount"
        label="成交金额"
        align="center"
        sortable
      />
      <el-table-column
        prop="success_order"
        label="成交订单"
        align="center"
        sortable
      />
      <el-table-column prop="references.name" label="推荐人" align="center" />
      <el-table-column align="center" label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >操作</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-size="vipList.pageSize"
      layout="prev, pager, next"
      :total="vipList.total"
      :current-page="vipList.currentIndex"
      @current-change="
        currentIndex => {
          vipList.currentIndex = currentIndex
          getVipList(vipList.currentIndex, vipList.pageSize)
        }
      "
    >
    </el-pagination>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { useVips } from '../../composable/useVips'
import { timeFormat, vip__, vip_from__ } from '../../utils'
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElTag,
  ElForm,
  ElFormItem,
  ElInput,
  ElPagination,
  ElImage,
} from 'element-plus'
export default defineComponent({
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElTag,
    ElForm,
    ElFormItem,
    ElInput,
    ElPagination,
    ElImage,
  },
  setup() {
    const { vipList, getVipList } = useVips()
    //   会员筛选关键字
    const keyword = ref('')
    // 列表选中事件回调
    const handleSelectionChange = () => {}
    // 表格样式修改（测试）
    const tableHeaderStyle = ({ row, column, rowIndex, columnIndex }) => {
      if (rowIndex === 0) {
        return 'background-color: #F0F4FC;  color: #000; font-weight: 500;'
      }
    }
    onMounted(() => {
      getVipList(vipList.value.currentIndex, vipList.value.pageSize)
    })
    return {
      timeFormat,
      vip__,
      vip_from__,
      handleSelectionChange,
      keyword,
      vipList,
      getVipList,
      tableHeaderStyle,
    }
  },
})
</script>

<style lang="scss">
@import '../../assets/styles/_var.scss';
.Vip {
  padding: $pad-1;
  .operation {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: $pad-1;
    .handle-input {
      width: 200px;
      display: inline-block;
    }
  }
  .table-expand {
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
      & > * {
        height: 30px;
        line-height: 30px;
      }
      label {
        width: 90px;
        color: #99a9bf;
      }
    }
  }
  .el-pagination {
    padding: 0;
    margin: $pad-1 0;
  }
}
</style>
